<template>
  <div class="navbar">
    <hamburger
      id="hamburger-container"
      :is-active="!sidebarCollapsed"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />

    <breadcrumb
      id="breadcrumb-container"
      class="breadcrumb-container"
    />

    <div class="right-menu">
      <template v-if="device !== 'mobile'">
        <!-- 全屏按钮 -->
        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <!-- 元素大小切换 -->
        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>

        <!-- 语言选择 -->
        <lang-select class="right-menu-item hover-effect" />
      </template>

      <!-- 用户头像下拉菜单 -->
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="userAvatar" class="user-avatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <router-link to="/profile/index">
              <el-dropdown-item>
                <el-icon><User /></el-icon>
                个人中心
              </el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click="logout">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, SwitchButton } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import Screenfull from '@/components/Screenfull/index.vue'
import SizeSelect from '@/components/SizeSelect/index.vue'
import LangSelect from '@/components/LangSelect/index.vue'
import defaultAvatar from '@/assets/images/default-avatar.png'

const appStore = useAppStore()
const userStore = useUserStore()

// 计算属性
const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
const device = computed(() => appStore.device)
const userAvatar = computed(() => {
  const avatar = userStore.userInfo?.avatar || userStore.userInfo?.avatarUrl
  return avatar || defaultAvatar
})

// 方法
const toggleSideBar = () => {
  appStore.toggleSidebar()
}

const logout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await userStore.logout()
    ElMessage.success('退出登录成功')
  } catch (error) {
    console.log('取消退出登录')
  }
}
</script>

<style lang="scss" scoped></style>
